<template>
  <CommBG>
    <div class="exam_wrapper pos_absolute flex_header_main">
      <UserOrgInfo />
      <div class="exam_main flex_main">
        <div class="snapshot_title">选择考试时间</div>
        <van-row gutter="20">
          <van-col span="12" v-for="(item, index) in examDataList" :key="index">
            <div class="sna_label" :class="activeIndex === index ? 'actieve_exam' : ''">{{ item.time }}</div>
          </van-col>
        </van-row>
      </div>
    </div>
  </CommBG>
</template>

<script lang="ts" setup name="user_orderPage">
  import CommBG from '@/components/bg/CommBG.vue'
  import UserOrgInfo from '@/components/user/UserOrgInfo.vue'
  import { reactive, ref } from 'vue'
  import useUserStore from '@/store/modules/user'
  import { useRouter } from 'vue-router'
  import sysMsg from '@/utils/sysMsg'

  const router = useRouter()
  const userStore = useUserStore()
  const ruleForm = ref<any>(null)
  const activeIndex = ref(1)
  const examDataList = [
    { time: '2024/10/10  9:00-11:00' },
    { time: '2024/10/10  9:00-11:00' },
    { time: '2024/10/10  9:00-11:00' },
    { time: '2024/10/10  9:00-11:00' },
    { time: '2024/10/10  9:00-11:00' },
    { time: '2024/10/10  9:00-11:00' },
    { time: '2024/10/10  9:00-11:00' },
    { time: '2024/10/10  9:00-11:00' },
  ]
  const onSubmit = () => {
    console.log(router)
    sysMsg.successMsg('点击登录')
    ruleForm.value.validate().then(async ({ valid, errors }: any) => {
      if (valid) {
        await userStore.user_orderCloud({ userName: '', passWord: '' })
      } else {
        console.log('error submit!!', errors)
      }
    })
  }
</script>

<style scoped lang="less">
  .exam_wrapper {
    .exam_main {
      background: #ffffff;
      border-radius: 90px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding: 60px 52px;
      .snapshot_title {
        font-weight: bold;
        font-size: 34px;
        color: #4548f4;
        margin-bottom: 36px;
      }
      .sna_label {
        font-weight: 400;
        font-size: 24px;
        color: #1f1f1f;
        padding: 13px 21px;
        border-radius: 10px;
        border: 2px solid #1f1f1f;
        margin-bottom: 22px;
      }
      .actieve_exam {
        background: #f46634;
        color: #ffffff;
        border: 2px solid #f46634;
      }
    }
  }
</style>
